<template>
  <div>
    <!-- 首页上半部分 -->
    <!-- <el-row class="hotspot cursor" @click.native="goHotspot">
      <h1>中国科学院空天信息创新研究院李晓明研究员受邀作学术报告</h1>
    </el-row> -->
    <!-- 首页下半部分 -->

    <div class="main">
      <!--      左侧主要部分-->
      <div class="left-side">
        <el-row type="flex" class="row-bg" justify="space-between">
          <div class="block ">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide v-for="(item, index) in imgList" :key="index" class="slide">
                <img :src="item.path" alt=""/>
                <div class="banner-inner">
                  <div class="banner-inner-box">
                    <div class="title-box">中国科学院空天信息创新研究院李晓明研究员受邀作学术报{{ item.index }}</div>
                  </div>
                </div>
              </swiper-slide>
              <!-- 根据情况引入控件 -->
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <news-section title="消防要闻" id="0" class="section"></news-section>
        </el-row>

        <el-row type="flex" class="row-bg" justify="space-between">
          <news-section title="机关文件" id="0" class="section"></news-section>
          <news-section title="机关动态" id="0" class="section"></news-section>
        </el-row>


      </div>


      <!--      右侧的边栏-->
      <div class="right-side">
        <zhi-ban-msg class="side"></zhi-ban-msg>
        <mail-box></mail-box>

        <zhuan-ti-zhuan-lan class="side"></zhuan-ti-zhuan-lan>

      </div>

    </div>


    <el-row type="flex" class="row-bg jump-jpg" justify="space-between">
      <img src="@/assets/image/jump/mhjy.jpg">
      <img src="@/assets/image/jump/zzgz.jpg">
      <img src="@/assets/image/jump/hqbz.jpg">
      <img src="@/assets/image/jump/hzfk.jpg">
      <img src="@/assets/image/jump/jwgz.jpg">
    </el-row>

    <div class="main">
      <div class="left-side">

        <ji-ceng-xin-wen></ji-ceng-xin-wen>


        <el-row type="flex" class="row-bg" justify="space-between">
          <news-section title="工作简报" id="0" class="section"></news-section>
          <news-section title="工作研讨" id="0" class="section"></news-section>

        </el-row>


        <el-row type="flex" class="row-bg" justify="space-between">

          <news-section title="媒体聚焦" id="0" class="section"></news-section>
          <news-section title="精品文摘" id="0" class="section"></news-section>

        </el-row>
      </div>

      <div class="right-side">
        <side-section class="side" title="通知公告"></side-section>
        <side-section class="side" title="本埠报道"></side-section>
        <side-section class="side" title="警营文化"></side-section>
        <er-ji-wang-zhan class="side"></er-ji-wang-zhan>
        <tou-gao-tong-ji class="side"></tou-gao-tong-ji>
      </div>


    </div>

    <ying-yong-xi-tong></ying-yong-xi-tong>
    <wang-zhan-dao-hang></wang-zhan-dao-hang>


    <!-- 定位fixed -->
    <div class="fixed1" :style="noFixed1?'visibility: hidden;':''">
      <div class="off-fixed cursor" @click="noFixed1=true"><i class="el-icon-circle-close"></i> 关闭</div>
      <a href="#"><img src="@/assets/image/fixed1/1.jpg" alt=""/></a>
      <a href="#"><img src="@/assets/image/fixed1/2.jpg" alt=""/></a>
      <a href="#"><img src="@/assets/image/fixed1/3.jpg" alt=""/></a>
      <a href="#"><img src="@/assets/image/fixed1/4.jpg" alt=""/></a>
    </div>
    <div class="fixed2" :style="noFixed2?'visibility: hidden;':''">
      <div class="off-fixed cursor" @click="noFixed2=true">关闭 <i class="el-icon-circle-close"></i></div>
      <a href="#"><img src="@/assets/image/fixed2/1.jpg" alt=""/></a>
      <a href="#"><img src="@/assets/image/fixed2/2.jpg" alt=""/></a>
      <a href="#"><img src="@/assets/image/fixed2/3.jpg" alt=""/></a>
      <a href="#"><img src="@/assets/image/fixed2/4.jpg" alt=""/></a>


    </div>
  </div>
</template>
<script>


import NewsSection from "@/components/index/NewsSection";

import ZhiBanMsg from "@/components/index/ZhiBanMsg";
import ZhuanTiZhuanLan from "@/components/index/ZhuanTiZhuanLan";
import SideSection from "@/components/index/SideSection";


import '@/assets/css/mySwiper.less'
import 'swiper/dist/css/swiper.css'
// 注意下边引入的swiper和swiperSlide第一个字母s都是小写的，大写会报错
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import ErJiWangZhan from "@/components/index/ErJiWangZhan";
import MailBox from "@/components/index/MailBox";
import YingYongXiTong from "@/components/index/YingYongXiTong";
import TouGaoTongJi from "@/components/index/TouGaoTongJi";
import JiCengXinWen from "@/components/index/JiCengXinWen";
import WangZhanDaoHang from "@/components/index/WangZhanDaoHang";

export default {
  components: {
    WangZhanDaoHang,
    JiCengXinWen,
    TouGaoTongJi,
    YingYongXiTong,
    MailBox,
    ErJiWangZhan,

    SideSection,
    ZhuanTiZhuanLan,
    ZhiBanMsg,
    NewsSection,
    swiper,
    swiperSlide

  },
  name: 'indexPage',
  data() {
    return {
      imgList: [
        {path: require('@/assets/image/lunbotu/OIP.jpg'), index: 1},
        {path: require('@/assets/image/lunbotu/R.jpg'), index: 1},
        {path: require('@/assets/image/lunbotu/OIP (1).jpg'), index: 3},
        {path: require('@/assets/image/lunbotu/OIP (2).jpg'), index: 4},
        {path: require('@/assets/image/lunbotu/OIP (3).jpg'), index: 5},
      ],
      swiperOption: {
        spaceBetween: 15, // 图片之间的间距
        centeredSlides: true, // 居中还是从图1开始
        slidesPerView: 1, // 一屏幕显示几个? 数字或者默认  auto 自动。
        notNextTick: true, // true:加载后允许触发事件 false:加载后不可以触发事件
        loop: true, // 循环吗
        initialSlide: 0, // 从第几个开始
        autoplay: {
          delay: 5000, // 等5秒下一个
          disableOnInteraction: false // 中间滑动一下，取消自动吗？
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: "bullets",
          bulletElement: 'div',
          bulletClass: 'my-bullet',//需设置.my-bullet样式
          bulletActiveClass: 'my-bullet-active',
          renderBullet: function (index, className) {
            return '<div class="' + className + '">' + (index + 1) + '</div>';
          },
        }, // 下按钮
        speed: 800, // 滑动时候动画的速度
        paginationClickable: true, // 下面按钮让点吗
        navigation: {
          prevEl: '.swiper-button-prev', // 左侧按钮
          nextEl: '.swiper-button-next' // 右侧按钮
        },
        // effect: 'coverflow', // 渐入效果
        watchSlidesProgress: true, // 开启这个参数来计算每个slide的progress
        watchSlidesVisibility: true, // 先要开启watchSlidesProgress参数，如果开启watchSlidesVisibility，则会在每个slide增加一个指示该slide的progress值得classname
        // autoHeight: true  // 图片高度自适应
      },
      noFixed1: false,
      noFixed2: false,

    }
  },
  created() {
    this.getnews()

  },
  methods: {
    getnews() {


    },
    goNews(id) {
      this.$router.push({path: '/home/news', query: {id: id}})
    },
    goHotspot() {


      this.$router.push('/home/news')

    }
  }
}
</script>
<style lang="less" scoped>
.block {
  width: 450px;
  display: flex;
  align-items: center;
}

.block div {
  img {
    width: 100%;
    height: 100%;
    // object-fit:cover;
  }
}

.main {
  display: flex;
}

.left-side {
  width: 950px;
}


.right-side {
  //width: 100%;

  padding-left: 30px;
}

.fixed1 {
  position: fixed;
  top: 250px;
  left: 2px;
  display: flex;
  flex-direction: column;

  .off-fixed {
    text-align: right;
    padding-right: 100px;
  }

  img {
    width: 200px;
    height: 100px;
  }
  .big{
    width: 300px;
    height: 150px;
  }

  z-index: 100;
}

.fixed2 {
  position: fixed;
  top: 250px;
  right: 2px;
  display: flex;
  flex-direction: column;

  img {
    width: 200px;
    height: 100px;
  }

  z-index: 100;

}

.hotspot {
  width: 100%;
  padding-bottom: 30px;

  h1 {
    text-align: center;
    color: rgb(84, 131, 206);
    font-size: 40px;
  }
}

.section {
  width: 450px;
  margin: 10px 0;

}

.side {
  width: 300px;
  //padding-top: 20px;
}

.gddt {
  width: 950px;
  margin: 10px 0;

}

.swiper-pagination {
  justify-content: right;
  display: flex;
  bottom: 5px;
  padding: 5px;
  width: 200px;
  left: 250px;
}

.banner-inner {

  bottom: 5px;
  position: absolute;


  .banner-inner-box {
    background-color: rgba(161, 171, 154, 0.36);
    height: 30px;
    width: 450px;

    .title-box {
      color: white;
      max-width: 250px;
      white-space: nowrap;
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 显示省略号 */
    }

    padding: 5px;

  }
}

.slide {

  img {
    min-height: 300px;
    max-height: 300px;
  }
}

.row-bg {
  margin: 10px;
}

.jump-jpg {
  margin: 10px 0;

  img {
    height: 90px;
    width: 240px;
    cursor: pointer;
  }
}

.off-fixed {
  font-size: 14px;
}
</style>
